<template>
  <div class="suggestion-container">
    <!-- 标题 -->
    <div class="navbar" :style="{ marginTop: statusBarHeight + 'px' }">
      <van-image
        width="20px"
        height="20px"
        fit="contain"
        :src="require('../../assets/ic_arrow_left_black.png')"
        @click="goBack" />
      <span class="navbar-title">投诉建议</span>
      <span class="navbar-right-text"></span>
    </div>
    <div class="suggestion-box">
      <span class="suggestion-text">机构名称：潍坊市自然资源和规划局</span>
      <span class="suggestion-text">联系电话：0536-8521397</span>
      <span class="suggestion-text">电子邮箱：wfgtxfk@wf.shandong.cn</span>
      <span class="suggestion-text">联系地址：潍坊市奎文区文化路1872号</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      statusBarHeight: 24,
      AppInfo: {},
      H5Info: {}
    }
  },
  computed: {
    ...mapGetters(['getNativeApi', 'getNativeCallJs'])
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getNativeCallJs.registerNativieGoBack(() => {
        vm.goBack()
      })
    })
  },
  created() {
    this.getNativeApi.setStatusBarColor('#FFFFFF')
    this.getNativeApi.setStatusBarLightMode(true)
    this.getNativeApi.getStatusBarHeight().then(result => {
      this.statusBarHeight = result.data
    })
    this.getVersionInfo()
  },
  methods: {
    getVersionInfo() {
      this.getNativeApi.getVersionInfo().then(res => {
        const result = JSON.parse(res.data)
        this.AppInfo = result.find(res => res.APPOSNAME == 'Android') || {}
        this.H5Info = result.find(res => res.APPOSNAME == 'SDK_H5') || {}
        console.log(this.AppInfo)
        console.log(this.H5Info)
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.suggestion-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.navbar {
  width: calc(100vw - 24px);
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 0 12px;
}
.navbar-title {
  font-weight: 800;
  font-size: 18px;
  color: #000000;
}
.navbar-right-text {
  font-size: 14px;
  color: #ffffff;
}
.suggestion-box {
  margin: 12px;
  padding: 9px 12px 15px 12px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
}

.suggestion-text {
  margin-top: 6px;
  color: #333333;
  font-size: 14px;
}
</style>
